<template>
	<view class="myBankCard">
		<custom-header title="我的银行卡" />
		<view class="content" v-if="detail.cardNo">
			<view class="bank_card">
				<view class="bankName">{{detail.bankName}}</view>
				<view class="bankDesc">{{detail.cardType}}</view>
				<view class="cardNumber">
					{{ detail.cardNo }}
				</view>
				<view class="time_btn">
					<view class="time">添加日期 {{detail.transDate}}</view>
					<view class="btn" @click="handleShowPopup">解除绑定</view>
				</view>
			</view>
			<view class="hint">
				<view class="text">温馨提示</view> 
				<view class="text">为了确保您的账户安全和顺畅使用，若您需要更换绑定的银行卡，请按照以下步骤操作：</view> 
				<view class="text">①解除绑定旧银行卡</view> 
				<view class="text">②在同一页面，点击绑定新银行卡</view> 
				<view class="text">输入新银行卡的信息（卡号、开户行等），并完成验证。确认信息无误后，点击绑定即可完成新银行卡的绑定。</view> 
				<view class="text">注意事项：</view> 
				<view class="text">在解绑旧卡之前，请确认没有未处理的交易或待付款项。新银行卡的绑定信息需要准确无误，以确保支付和转账的顺利进行。</view> 
				<view class="text">感谢您选择我们的服务！</view> 
			</view>
		</view>
		<view class="no_data" v-else>
			<view class="icon" :style="{height:'calc(100vh - 135rpx - '+statusBarHeight+'px)'}" >
				<image src="/static/my/bank_card_nodata.png" mode=""></image>
			</view>
			<view class="footer_btn_wrap">
				<view class="btn_wrap">
					<button
						size="default" 
						type="default" 
						class="btn confirm"
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						@click="handleBinding">绑定银行卡</button>
				</view>
			</view>
		</view>
		<!-- 自定义确认弹出层 -->
		<custom-popup 
			:show="isShowPopup" 
			:config="popupConfig"
			@cancel="handlePopupCancel" 
			@confirm="handlePopupConfirm">
		</custom-popup>
		<!-- 自定义消息弹出层 -->
		<custom-popup
			:show="isShowToast" 
			:config="popupConfig"
			@confirm="isShowToast = false">
		</custom-popup>
	</view>
</template>

<script setup>
	import { computed, ref, onMounted } from 'vue'
	import { useStore } from 'vuex';
	import supplierApi from '@/api/supplier'
	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	const detail = ref({
		cardNo:''
	})
	
	// 弹窗提示
	const isShowToast = ref(false)
	const isShowPopup = ref(false)
	const popupConfig  = ref({})
	const handlePopupCancel = ()=>{
		isShowPopup.value = false
	}
	const handleShowPopup = ()=>{
		if(!detail.value.cardNo){
			popupConfig.value = {
				message:'未查询到银行卡信息'
			}
			isShowToast.value = true
			return
		}
		popupConfig.value = {
			message:'您确定要解除'+detail.value.cardNo+'这张卡吗？',
			showCancel:true
		}
		isShowPopup.value = true
	}
	const handlePopupConfirm = async () => {
		try {
			if (!detail.value.cardNo) {
				console.error('缺少银行卡信息，无法解绑')
				isShowPopup.value = false
				popupConfig.value = {
					message: '银行卡信息异常，无法解绑'
				}
				isShowToast.value = true
				return
			}

			await supplierApi.unbindAllinBankCard(unbindData)
			isShowPopup.value = false
			popupConfig.value = {
				message: '操作成功'
			}
			isShowToast.value = true
			detail.value.cardNo = ''

		} catch (error) {
			console.error('银行卡解绑失败:', error)
			isShowPopup.value = false
			popupConfig.value = {
				message: error.message || '解绑失败，请重试'
			}
			isShowToast.value = true
		}
	}
	
	// 去绑定
	const handleBinding = ()=>{
		uni.navigateTo({
			url:'/pages/bankCardBinding/bankCardBinding'
		})
	}

	// 获取银行卡详情
	const getBankCardDetail = async () => {
		try {
			const response = await supplierApi.getAllinMemberBankCard();
			detail.value = response;
		} catch (error) {
			console.error('银行卡信息加载失败:', error);
			// popupConfig.value = {
			// 	message: error.message || '银行卡信息加载失败，请重试'
			// }
			isShowToast.value = true			
		}
	}

	onMounted(()=>{
		getBankCardDetail()
	})
	

	
</script>

<style lang="scss">
	.myBankCard{
		min-height: 100vh;
		background: #fff;
		.bank_card{
			width: 702rpx;
			height: 380rpx;
			background: url('https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/bank_card_bg.png');
			background-size: cover;
			margin: 20rpx auto;
			color: #fff;
			position: relative;
		}
		.bankName{
			padding-top: 36rpx;
			padding-left: 138rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.bankDesc{
			padding-top: 10rpx;
			padding-left: 138rpx;
			font-size: 24rpx;
		}
		.cardNumber{
			font-size: 56rpx;
			font-weight: bold;
			text-align: center;
			padding-top: 56rpx;
		}
		.time_btn{
			position: absolute;
			bottom: 30rpx;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 80rpx);
			padding: 0 40rpx;
			.time{
				font-size: 24rpx;
			}
			.btn{
				width: 144rpx;
				height: 49rpx;
				line-height: 49rpx;
				text-align: center;
				border-radius: 10rpx;
				border: 1rpx solid #FFFFFF;
				font-size: 28rpx;
			}
		}
		.hint{
			font-size: 28rpx;
			color: #999999;
			padding: 0rpx 20rpx 20rpx;
			.text{
				text-align: justify;
				line-height: 48rpx;
			}
		}
	}
	.no_data{
		.icon{
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 280rpx;
				height: 322rpx;
			}
		}
	}
</style>
